<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta content="text/html;charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="IE=edge,Chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/bootstrap-theme.min.css}" rel="stylesheet"/>

    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
            font-family: sans-serif;
            background-size: cover;
        }

        .mainHolder {
            text-align: center;
            padding: 100px;
        }

        .box {
            margin: 0 auto;
            width: 400px;
        }

        .login_title {
            margin-bottom: 1em;
            text-align: center;
        }

        .box > form {
            padding: 2em;
        }
    </style>
</head>
<body>
<div class="container mainHolder">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4">
            <div class="box">
                <form id="loginForm" class="form-horizontal" th:action="@{/login}" method="post">
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1">
                            <h2 class="login_title">Login</h2>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-user fa-lg"></i></span>
                                    <input type="text" class="form-control required" name="username"
                                           title="请输入用户名 (至少三个字母)" minlength="3" placeholder="用户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-lock fa-lg"></i></span>
                                    <input type="password" class="form-control required" name="password"
                                           placeholder="密码"
                                           title="请输入密码，密码长度为5到20个字符" minlength="3" maxlength="20">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="text-center">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="rememberMe"> 记住我
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div id="errorMsg" style="color: red;" th:if="${param.error}">
                                <label id="errors" class="error" th:if="${param.error}"
                                       th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></label>
                            </div>
                            <div class="form-group">
                                <div class="text-center">
                                    <button type="submit" class="btn btn-default">登陆</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script th:src="@{/js/html5shiv.min.js}"></script>
<script th:src="@{/js/respond.min.js}"></script>
<![endif]-->
<script th:inline="javascript">
    $(function() {
        $('#loginForm').validate({
            errorPlacement: function(error, element) {
                // 移除原错误
                $("#errors").remove();
                // 追加新错误
                error.appendTo($("#errorMsg"));
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
    })
</script>
</html>
